<template>
  <div class="mine mine_new page">
    <div class="page-bg"></div>
    <div class="wrapper">
      <van-pull-refresh style="height: 100%; overflow-y: scroll" v-model="refresh" :success-text="refreshMsg" success-duration="2000"
                        @refresh="onRefresh">
        <template #default>
          <div class="header header_bg_1 login_register_1">
            <div class="user-wrapper">
              <van-image width="60px" height="60px" round :src="userInfo.header_img"/>
              <div class="user-content">
                <div class="name"><span class="text">账号 : {{ userInfo.username }}</span>
                  <div v-if="userInfo.is_qiandao" class="van-image level-icon"><img
                      :src="require('../../assets/img/tip/vip1.png')"
                      class="van-image__img" style="object-fit: contain;"></div>
                </div>
              </div>
              <div class="set-div"><i
                  class="van-badge__wrapper iconfont iconfont-shezhi right-icon"
                  style="font-size: 20px;" @click="$router.push({ name: 'Setting' })"></i></div>
            </div>
            <div class="wallet my_wallet_100">
              <div class="part-2 van-hairline--bottom"><p class="balance van-ellipsis"
              ><span
              >资产余额</span><span>{{ userInfo.money }}</span></p>
                <div class="refresh-btn" @click="onRefresh"><i
                    class="van-badge__wrapper iconfont iconfont-sx icon"
                    style="font-size: 15px;"></i></div>
              </div>
            </div>
          </div>
          <div class="content padding-class">
            <div class="finance recharge_withdraw_2">
              <div class="finance-item" @click="$router.push({ name: 'Withdraw' })"><span class="text"
              >兑现积分</span><img
                  :src="require('../../assets/img/tip/withdraw.png')"></div>
              <div class="finance-item" @click="$router.push({ name: 'Welfare' })"><span class="text"
              >打赏</span><img
                  :src="require('../../assets/img/tip/bet.png')"></div>
            </div>
            <div class="report-detail-div report_detail_1">
              <ul>
                <li @click="$router.push({name: 'AccountDetailList'})"><img class="menu-item-icon"
                         src=""
                ><span class="menu-item-label"
                >积分明细</span>
                </li>
                <li @click="$router.push({name: 'RecordList'})"><img class="menu-item-icon"
                         src=""
                ><span class="menu-item-label"
                >打赏记录</span>
                </li>
                <li @click="$router.push({ name: 'WithdrawRecord' })"><img class="menu-item-icon"
                         src=""
                ><span class="menu-item-label"
                >兑换记录</span>
                </li>
                <li @click="gotoSign"><img class="menu-item-icon"
                         src=""
                ><span class="menu-item-label"
                >签到</span></li>
              </ul>
            </div>
            <div class="menu" more_features="2">
              <div class="menu-item" @click="$router.push({name: 'EditPassword'})">
                <div ><img class="menu-item-icon"
                          src=""
                ><span class="menu-item-label"
                >安全中心</span>
                </div>
                <i class="van-badge__wrapper van-icon van-icon-arrow font-gray"
                   style="font-size: 14px;"></i></div>
              <div class="menu-item" @click="$router.push({ name: 'CardList' })">
                <div><img class="menu-item-icon"
                          src=""
                ><span class="menu-item-label"
                >银行卡管理</span>
                </div>
                <i class="van-badge__wrapper van-icon van-icon-arrow font-gray"
                   style="font-size: 14px;"></i></div>
              <div class="menu-item" @click="$router.push({ name: 'LevelCenter'})">
                <div><img class="menu-item-icon"
                          :src="require('../../assets/img/tip/levelCenter.png')"
                ><span class="menu-item-label"
                >等级中心</span>
                </div>
                <i class="van-badge__wrapper van-icon van-icon-arrow font-gray"
                   style="font-size: 14px;"></i></div>
              <div class="menu-item" @click="$router.push({ name: 'AgentCenter'})">
                <div><img class="menu-item-icon"
                          src=""
                ><span class="menu-item-label"
                >援助交际</span>
                </div>
                <i class="van-badge__wrapper van-icon van-icon-arrow font-gray"
                   style="font-size: 14px;"></i></div>
              <div class="menu-item" @click="$router.push({ name:'ServiceOnline' })">
                <div><img class="menu-item-icon"
                          src=""
                ><span class="menu-item-label"
                >客服</span>
                </div>
                <i class="van-badge__wrapper van-icon van-icon-arrow font-gray"
                   style="font-size: 14px;"></i></div>
              <div class="menu-item" @click="$router.push({name: 'Message'})">
                <div><img class="menu-item-icon"
                          src=""
                ><span class="menu-item-label"
                >我的消息</span>
                </div>
                <i class="van-badge__wrapper van-icon van-icon-arrow font-gray"
                   style="font-size: 14px;"></i></div>
            </div>
          </div>
        </template>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {Toast} from "vant";

export default {
  name: "Mine",
  computed: mapGetters(["userInfo"]),
  activated() {
    this.$store.dispatch("UpdateUserInfo");
  },
  data: function () {
    return {
      refresh: false,
      refreshMsg: "刷新成功"
    }
  },
  methods: {
    onRefresh: function () {
      let that = this;
      this.refresh = true;
      this.$store.dispatch("UpdateUserInfo").then(() => {
        that.refresh = false;
        that.refreshMsg = "刷新成功";
      }).catch(e => {
        that.refresh = false;
        that.refreshMsg = "刷新失败";
      })
    },
    gotoSign: function (){
      // Toast.fail({
      //   message: "功能开发中, 敬请期待",
      //   forbidClick: true,
      //   duration: 3000
      // })
	  this.$router.push({
	    name: "Sign"
	  })
    }
  }
};
</script>
<style scoped>
.my_wallet_1 {
  width: calc(100% - .53333rem) !important;
  box-shadow: none !important;
  margin-left: .26667rem;
  margin-right: .26667rem
}

.my_wallet_2 {
  width: 100% !important;
  box-shadow: none !important
}

.my_wallet_3 {
  width: calc(100% - .53333rem) !important;
  background-color: rgba(42, 35, 44, .6) !important;
  box-shadow: none !important;
  margin: 0 auto;
  border-radius: 0 !important
}

.my_wallet_3 {
  color: #fff !important
}

.wallet {
  margin-top: .32rem;
  padding: 0 .4rem;
  background-color: #ffd29f;
  border-radius: .26667rem .26667rem 0 0
}

.wallet .part-1 {
  display: flex;
  align-items: center;
  height: 1.2rem
}

.wallet .part-2 {
  display: flex;
  align-items: center;
  height: 1.86667rem
}

.wallet .part-2 .balance {
  flex: 1;
  display: flex;
  flex-direction: column
}

.wallet .part-2 .balance span:first-child {
  color: #000;
  font-size: .37333rem;
  margin-bottom: .13333rem
}

.wallet .part-2 .balance span:nth-child(2) {
  font-size: .53333rem;
  font-weight: 700
}

.wallet .part-2 .refresh-btn {
  margin-left: .26667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .66667rem;
  height: .66667rem;
  border-radius: 50%;
  background-color: #fa59b5
}

.wallet .part-2 .refresh-btn .icon {
  color: #fff
}

.wallet .part-3 {
  display: flex;
  align-items: center
}

.wallet .part-3 .part-3-item {
  flex: 1;
  padding: .4rem 0
}

.wallet .part-3 .part-3-item .part-3-num {
  margin-bottom: .13333rem;
  font-size: .42667rem;
  line-height: .53333rem;
  font-weight: 700;
  color: #e38afb
}

.wallet .part-3 .part-3-item .part-3-big-num {
  margin-top: .26667rem;
  font-size: .53333rem !important;
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.wallet .part-3 .part-3-item .part-3-big-num > span:nth-child(2) {
  font-size: .32rem;
  font-weight: 400;
  text-decoration: underline
}

.wallet .part-3 .part-3-item .open-profit-btn {
  background: linear-gradient(90deg, #e38afb, #fa59b5);
  color: #fff;
  height: .74667rem;
  font-size: .37333rem;
  border-radius: .16rem
}

.wallet .part-3 .part-3-line {
  margin: 0 .66667rem;
  width: .02667rem;
  height: .53333rem;
  background-color: #eee
}

.wallet .part-3 .warn-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .53333rem;
  height: .53333rem;
  border-radius: 50%;
  background-color: #c8c8c8;
  color: #fff;
  font-weight: 700
}

.wallet .part-3 .warn-btn .icon {
  color: #fff
}

.wallet .part-3 .refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .53333rem;
  height: .53333rem;
  border-radius: 50%;
  background-color: #fa59b5
}

.wallet .font-primary-color, .wallet .part-3 .refresh-btn .icon {
  color: #fff
}

.header_bg_1 {
  background: linear-gradient(120deg, #ffceca, #ffc3be 36%, #e99da8) !important;
  padding-bottom: .26667rem !important
}

.header_bg_1 .user-wrapper {
  margin: 0 .26667rem !important
}

.header_bg_1 .nav {
  background: #f7f9fa !important
}

.header_bg_1 .nav .right-icon {
  color: #000 !important
}


.header {
  padding: .26667rem;
  background: linear-gradient(90deg, #e38afb, #fa59b5)
}

.header .nav {
  background: linear-gradient(120deg, #ffceca, #ffc3be 36%, #e99da8) !important
}

.header .nav .right-icon {
  color: #fff
}

.header .user-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 .66667rem
}

.header .user-wrapper .login-content {
  flex: 1;
  margin-left: .4rem
}

.header .user-wrapper .login-content .login-btn {
  display: inline-block;
  font-size: .48rem;
  line-height: .58667rem;
  color: #fff;
  font-weight: 500
}

.header .user-wrapper .login-content .login-label {
  margin-top: .13333rem;
  line-height: .42667rem;
  font-size: .32rem;
  color: hsla(0, 0%, 100%, .6)
}

.header .user-wrapper .user-content {
  flex: 1;
  margin-left: .4rem
}

.header .user-wrapper .user-content .special-header-div {
  color: #fff;
  font-size: .32rem;
  display: flex;
  align-items: center;
  font-weight: 700
}

.header .user-wrapper .user-content .special-header-div span {
  margin-right: .13333rem
}

.header .user-wrapper .user-content .name {
  display: flex;
  align-items: center
}

.header .user-wrapper .user-content .name .text {
  font-size: .42667rem;
  font-weight: 500;
  color: #fff;
  margin-right: .13333rem
}

.header .user-wrapper .user-content .name .small-text {
  font-size: .32rem;
  font-weight: 500;
  color: #fff
}

.header .user-wrapper .user-content .name .userid-span {
  margin-left: .26667rem
}

.header .user-wrapper .user-content .name .level-icon {
  margin-left: .13333rem;
  height: .8rem;
  -o-object-fit: contain;
  object-fit: contain
}

.header .user-wrapper .user-content .experience {
  display: flex;
  margin: .26667rem 0;
  width: 80%;
  height: .10667rem;
  border-radius: .26667rem;
  background-color: hsla(0, 0%, 100%, .5);
  overflow: hidden
}

.header .user-wrapper .user-content .experience .experience-content {
  height: 100%;
  border-radius: .26667rem;
  background-color: #fff
}

.header .user-wrapper .user-content .experience-text {
  font-size: .26667rem;
  font-weight: 500;
  color: #fff
}

.header .user-wrapper .use-content-name {
  color: #fff;
  margin-left: .2rem;
  font-size: .42667rem
}

.finance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: .4rem;
  right: .4rem;
  height: 1.33333rem
}

.finance .finance-item {
  width: 48%;
  border-radius: .10667rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
  background: linear-gradient(90deg, #ffd1cd, #ffb2ac)
}

.finance .finance-item img {
  height: 100%
}

.finance .finance-item .text {
  margin-left: .32rem;
  font-size: .34667rem;
  color: #000;
  font-weight: 500
}

.finance .line {
  width: .02667rem;
  height: .53333rem;
  background-color: #ccc
}

.finance .full-line {
  height: 100%;
  background-color: hsla(0, 0%, 80%, .2)
}

.report-detail-div {
  background-color: transparent;
  padding: .4rem 0
}

.report-detail-div ul {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around
}

.report-detail-div ul li {
  width: 33.33%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.report-detail-div ul li .menu-item-icon {
  height: .8rem;
  -o-object-fit: contain;
  object-fit: contain;
  margin-bottom: .13333rem
}

.report-detail-div ul li .menu-item-label {
  font-size: .37333rem;
  color: #fff;
  font-weight: 500
}

.menu {
  margin-top: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: transparent
}

.menu .menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 95%;
  height: 1.33333rem;
  margin: 0 auto
}

.menu .menu-item > div {
  display: flex;
  align-items: center
}

.menu .menu-item > div .menu-item-icon {
  margin: 0 .42667rem 0 0;
  position: relative;
  height: .66667rem;
  -o-object-fit: contain;
  object-fit: contain;
  color: #fff
}

.menu .menu-item > div .menu-item-label {
  font-size: .37333rem;
  color: #fff;
  font-weight: 500
}

.menu .menu-item .font-gray {
  color: #fff
}

.mine_new {
  background-color: #f7f9fa !important
}

.mine_new .page-bg {
  background: none !important
}

.mine_new .content {
  background-color: #16151b !important
}

.mine {
  position: relative;
  bottom: 1.33333rem;
  background: #f2f2f5
}

.mine .page-bg {
  height: 50vh;
  background: linear-gradient(90deg, #fff, #fff)
}

.mine .wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.mine .wrapper .pull-text {
  font-size: .34667rem;
  color: #fff
}

.mine .wrapper .pull-loading {
  display: flex;
  align-items: center;
  justify-content: center
}

.mine .wrapper .pull-loading .pull-loading-text {
  margin-left: .26667rem;
  font-size: .34667rem;
  color: #fff
}

.mine .wrapper .padding-class {
  padding: .13333rem .13333rem .8rem
}

.mine .wrapper .content {
  position: relative;
  min-height: 50vh;
  background-color: #f2f2f5
}

.mine .wrapper .special-menu-div {
  color: #fff;
  font-size: .32rem;
  display: flex;
  align-items: center;
  justify-content: space-around
}

.mine .wrapper .special-menu-div div {
  height: .58667rem;
  padding: 0 .53333rem;
  border-radius: .26667rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e38afb
}

</style>
